// // 获取节点
// function $(ele){
//     return document.querySelector(ele)
// }
// function $$(el) {
//     return document.querySelectorAll(el)

// }
// class Index{
//     constructor(){
//         this. li= document.querySelectorAll('.nav ul li')
//         console.log(this.li)
//         this. continer=document.querySelectorAll('.mouseover_top_down')
//         console.log(this.continer)
//         this.list()
//     }
//     // 
//     list(){
//         for(let i=0;i<this.li.length-2;i++){
//             let that=this
//             this.li[i].onmouseover=function () {
//                 that.continer[i].style.display = "block"

//             }
//             this.li[i].onmouseout=function () {
//                 that.continer[i].style.display = "none"

//             }
//         }
//     }

// }
// new Index
// 获取元素



// 购物车图片
let shop = document.querySelector('.nav_top_right .shopping')
// console.log(shop)
let shop2 = document.querySelector('.shopping_cart')
shop.onmouseover = shop2.onmouseover = function () {
	shop.style.backgroundColor = 'white'
	shop.style.color = '#ff6a00'
	shop2.style.display = 'block'

}
shop.onmouseout = shop2.onmouseout = function () {
	shop2.style.display = 'none'
	shop.style.backgroundColor = '#424242'
	shop.style.color = '#b0b0b0'

}

// 导航
let li = document.querySelectorAll('.nav ul li')
// console.log(li)
let continer = document.querySelectorAll('.mouseover_top_down_1')
let main = document.querySelector('.main')

// console.log(main)
// // 遍历li
for (let i = 0; i < li.length - 2; i++) {
	continer[i].onmouseover = li[i].onmouseover = function () {
		continer[i].style.display = "block"
	}
	continer[i].onmouseout = li[i].onmouseout = function () {
		continer[i].style.display = "none"
	}
	// continer[i].style.display = 'none'
}


// 侧边导航栏
let li1 = document.querySelectorAll('.mian_list li')
// console.log(li1)
let list = document.querySelectorAll('.list_module')
// console.log(list)
// 遍历
for (let i = 0; i < li1.length; i++) {
	list[i].onmouseover = li1[i].onmouseover = function () {
		list[i].style.display = "block"
	}
	list[i].onmouseout = li1[i].onmouseout = function () {
		list[i].style.display = "none"
	}
}


// input输入框的实现
let input = document.querySelector('.nav .nav_input input')
let text = document.querySelector('.nav_text_list')
let btn = document.querySelector('.nav_sub')
console.log(input, text)
// 获取焦点
input.onfocus = function () {
	text.style.display = 'block'
}
input.onfocus = function () {
	text.style.display = 'block'
	input.style.borderColor = '#ff6700'
	btn.style.borderColor = '#ff6700'
}
input.onblur = function () {
	text.style.display = 'none'
	input.style.borderColor = '#b0b0b0'
	btn.style.borderColor = '#b0b0b0'
}


// 右边侧栏
let li2 = document.querySelectorAll('.right_aside li')
let ewm = document.querySelector('.right_aside_ewm')
let pic1 = document.querySelectorAll('.right_aside img')
let p = document.querySelectorAll('.right_aside p')
// console.log(pic1)
// console.log(li2)
li2[0].onmouseover = function () {
	pic1[0].src = "../image/app1.png"
	p[0].style.color = '#ff6a00'
	ewm.style.display = 'block'
}
li2[0].onmouseout = function () {
	ewm.style.display = 'none'
	pic1[0].src = '../image/app2.png'
	p[0].style.color = '#999999'
}
li2[1].onmouseover = function () {
	pic1[1].src = "../image/personal2.png"
	p[1].style.color = '#ff6a00'
}
li2[1].onmouseout = function () {
	pic1[1].src = '../image/personal1.png'
	p[1].style.color = '#999999'
}
li2[2].onmouseover = function () {
	pic1[2].src = "../image/shouhou2.png"
	p[2].style.color = '#ff6a00'
}
li2[2].onmouseout = function () {
	pic1[2].src = '../image/shouhou1.png'
	p[2].style.color = '#999999'
}
li2[3].onmouseover = function () {
	pic1[3].src = "../image/kefu2.png"
	p[3].style.color = '#ff6a00'
}
li2[3].onmouseout = function () {
	pic1[3].src = '../image/kefu1.png'
	p[3].style.color = '#999999'
}
li2[4].onmouseover = function () {
	pic1[4].src = "../image/buycar2.png"
	p[4].style.color = '#ff6a00'
}
li2[4].onmouseout = function () {
	pic1[4].src = '../image/buycar1.png'
	p[4].style.color = '#999999'
}
li2[5].onmouseover = function () {
	pic1[5].src = "../image/returntop2.png"
	p[5].style.color = '#ff6a00'
}
li2[5].onmouseout = function () {
	pic1[5].src = '../image/returntop1.png'
	p[5].style.color = '#999999'
}
onscroll = function () {
	let scrollTop = document.documentElement.scrollTop
	if (scrollTop >= 1500) {
		li2[5].style.display = 'block'

	} else if (scrollTop <= 800) {
		li2[5].style.display = 'none'
	}
	li2[5].onclick = function () {
		// console.log(111)
		scrollTo(0, 0)
		this.style.display = 'none'
	}
}


// 轮播图
// 获取元素
let ul = document.querySelector('.turns_img')
// 获取图片
let pic = ul.children
// 获取按钮
let btn1 = document.querySelector('.turns_img_left')
let btn2 = document.querySelector('.turns_img_right')
// 小圆圈
let circle = document.querySelector('.circle')
// console.log(ul, pic, btn1, btn2)
// 动态创建小圆圈
function circk() {
	for (let i = 0; i < pic.length; i++) {
		let li = document.createElement('li')
		circle.appendChild(li)

	}
	// 第一个默认设置为白色
	circle.children[0].className = 'current'
	// 克隆第一张图片出来，放在轮播图里面的最后一个，克隆li，包括里面的图片
	let first = pic[0].cloneNode(true)
	// 追加到ul里面
	ul.appendChild(first)
}
circk()
// 点击按钮改变按钮颜色
function cut() {
	// 循环按钮
	for (let i = 0; i < circle.children.length; i++) {
		circle.children[i].setAttribute('index', i)
		circle.children[i].onclick = function () {
			let index = circle.children[i].getAttribute('index')
			num = index
			cik = index
			// console.log(111)
			for (let j = 0; j < circle.children.length; j++) {
				circle.children[j].className = ' '
			}
			this.className = 'current'
			animation(ul, -pic[0].offsetWidth * index, 'left')
		}


	}
}
cut()
// 点击右侧按钮让图片切换
// 申明一个变量，，来保存动画的下标
let num = 0
// 小圆圈的下标
let cik = 0
let flg = true
btn2.onclick = function () {

	if (flg) {
		flg = false
		num++
		animation(ul, -pic[0].offsetWidth * num, 'left', function () {
			if (num == pic.length - 1) {
				num = 0
				ul.style.left = 0
			}
			flg = true
		})

		cik++
		if (cik > circle.children.length - 1) {
			cik = 0
		}
		for (let i = 0; i < circle.children.length; i++) {
			circle.children[i].className = ''
		}
		circle.children[cik].className = 'current'
	}

} //点击左侧按钮进行切换
btn1.onclick = function () {
	if (flg) {
		flg = false
		if (num == 0) {
			num = pic.length - 1
			//一瞬间把它拉回第一张图片
			ul.style.left = -pic[0].offsetWidth * num + 'px'
		}
		num--
		animation(ul, -pic[0].offsetWidth * num, 'left', function () {
			flg = true
		})
		cik--
		if (cik < 0) {
			cik = circle.children.length - 1
		}
		for (var j = 0; j < circle.children.length; j++) {
			circle.children[j].className = ''
		}
		circle.children[cik].className = 'current'
	}
}
let timer = null
//自动轮播
function auto() {
	timer = setInterval(function () {
		//怎么调用事件和匿名函数  
		//next.onclick里面保存的就是函数，所以加一个括号就可以直接调用执行
		//让事件自调用，直接加括号就可以
		btn2.onclick()
	}, 3000)
}
auto()
//当鼠标移入到swiper容器里面的时候让自动轮播停止
ul.parentNode.onmouseover = function () {
	clearInterval(timer)
}
ul.parentNode.onmouseout = function () {
	auto()
}


// 穿戴
let lis = document.querySelectorAll('.last .cellphone_Mobile_two_right')
let d1 = document.querySelector('.cellphone_Mobile_one_1').children
// console.log(lis)
// 遍历
for (let i = 0; i < d1.length; i++) {
	d1[i].setAttribute('index', i)
	d1[i].onmouseover = function () {
		let index = this.getAttribute('index')
		for (let j = 0; j < d1.length; j++) {
			d1[j].className = ''
			lis[j].style.display = 'none'
		}
		this.className = 'capacity_underline'
		lis[index].style.display = 'block'
	}
}


// 生活电器
let m1 = document.querySelector('.cellphone_Mobile_life').children
let d2 = document.querySelectorAll('.last_1 .cellphone_Mobile_two_right')
console.log(m1, d2)
// 遍历
for (let i = 0; i < m1.length; i++) {
	m1[i].setAttribute('index', i)
	m1[i].onmouseover = function () {
		let index = this.getAttribute('index')
		for (let j = 0; j < m1.length; j++) {
			m1[j].className = ''
			d2[j].style.display = 'none'
		}
		this.className = 'cellphone_Mobile_life_class'
		d2[index].style.display = 'block'
	}
}

// 换数据
let ul2 = document.querySelector('.pot')
// console.log(ul2)
async function getGoods() {
	let data = await axios.get({
		url: '../js/shop.json',
		data: ''
	});
	// console.log(data)
	// 遍历到页面中
	let html = ''

	data.forEach(ele => {
		// console.log(ele)
		html += `<li onclick="bit(${ele.id},1)"><img src="${ele.src}" alt="mix4" ><p>${ele.name}</p><p>${ele.price}</p></li>`
	})
	// 追加
	ul2.innerHTML = html
	// console.log(html)
}
getGoods()

function bit(gid,num) {
	let list = {}
		list["id"] = gid
	console.log(list);
	localStorage.setItem('cart', JSON.stringify(list))
	location.href="http://localhost/xiaomi/html/detail.html"
}